<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用transition实现图中效果</title>
</head>
<link rel="stylesheet" href="./css/transition.css">
<body>
    <div class="box">
    <ul>
        <li><div class="list">0</div> <div class="catalogue"><a href="#">站长素材</a></div></li>
        <li><div class="list">1</div> <div class="catalogue"><a href="#">书签切换</a></div></li>
        <li><div class="list">2</div> <div class="catalogue"><a href="#">幻灯片</a></div></li>
        <li><div class="list">3</div> <div class="catalogue"><a href="#">图片滚动-左</a></div></li>
        <li><div class="list">4</div> <div class="catalogue"><a href="#">图片滚动-上</a></div></li>
        <li><div class="list">5</div> <div class="catalogue"><a href="#">图片无缝滚动-左</a></div></li>
        <li><div class="list">6</div> <div class="catalogue"><a href="#">图片无缝滚动-上</a></div></li>
        <li><div class="list">7</div> <div class="catalogue"><a href="#">文字滚动-左</a></div></li>
        <li><div class="list">8</div> <div class="catalogue"><a href="#">文字滚动-上</a></div></li>
        <li><div class="list">9</div> <div class="catalogue"><a href="#">文字无缝滚动-左</a></div></li>
        <li><div class="list">10</div> <div class="catalogue"><a href="#">文字无缝滚动-上</a></div></li>
        <li><div class="list">11</div> <div class="catalogue"><a href="#">其他基础效果</a></div></li>
    </ol>
</div>
</body>
</html>